<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑金网</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <style type="text/css">
        #topContainer{
            width: 100%;
            position: relative;
            overflow: hidden;
            background-color: #666666;
            transition: background-color 1s;
        }
        #searchBT{
            background-color: #888888;
        }
        #rollContent{
            height: 180px;
            overflow: hidden;
        }
        #rollContent img{
            width: 100%;
        }
        #searchContainer{
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            z-index: 1000;
            margin: 0 auto;
            overflow: hidden;
            padding: 5px 0 5px 0;
            background-color: rgba(100,100,100,0.4);
        }
        #tranContainer{
            padding-top: 40px;
        }
        #dhContainer ul{
            margin: 0;
            padding: 20px 0 20px 0px;
            overflow: hidden;
            color: #FFF;
            font-size: 12px;
        }
        #dhContainer ul li{
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style: none;
            width: 20%;
            text-align: center;
            float: left;
        }
        #dhContainer ul li img{
            width: 70%;
        }
        .dhtitle{
            margin-top: 5px;
        }
        #listTurnContainer{
            margin-top: 5px;
            background-color: #FFF;
            padding: 10px;
            overflow: hidden;
        }
        #businessContainer{
            overflow: hidden;
            background-color: #FFF;
            padding: 10px;
            margin-top: 5px;
        }
        #footContainer{
            padding: 10px;
            margin-top: 5px;
            text-align: center;
        }
        .bnoneContainer{
            padding: 5px;
        }
        .bnone{
            border-radius: 3px;
            padding: 10px;
            background-color: #efefef;
            overflow: hidden;
        }
        .bnone img{
            width: 100%;
        }
        .bnonetext1{
            font-size: 10px;
            font-weight: bold;
            color: #c7b399;
        }
        .bnonetext2{
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin: 5px 0 10px 0;
        }
        .bnonetext3{
            font-size: 12px;
            color: #999;
        }
        #commodityContainer{
            overflow: hidden;
            background-color: #FFF;
            padding: 10px;
            margin-top: 5px;
        }
        .ts-container {

        }
        .ts-container li{
            padding: 0 5px 0 5px;
            overflow: hidden;
        }
        .ts-card {
            background-color: #f8f8f8;
            overflow: hidden;
            border-radius: 3px;
            padding-bottom: 10px;
        }
        .ts-card__image {
            background-color: #efefef;
            height: 200px;
        }
        .ts-card__image img{
            width: 100%;
            max-height: 200px;
        }
        .ts-card__title {
            display: inline-block;
            background-color: #CDA3B1;
            font-size: 12px;
            line-height: 26px;
            color: #FEFFFF;
            margin-left: 15px;        /* 20 * 12 / 16 */
            padding: 0;
            padding-left: 3px;
            padding-right: 3px;
            line-height: 26px;
        }
        .ts-card__description {
            background-color: #f8f8f8;
            width: 100%;
        }
        .ts-card__description--title {
            font-size: 16px;
            color: #666;
            margin-top: 14px;             /* 22 * 16 / 24 */
            line-height: 16px;
            padding: 0 10px 0 10px;
        }
        .ts-card__description--discount {
            display: inline-block;
            font-size: 12px;
            border-style: solid;
            border-width: 1px;
            border-color: #FF0000;
            color: #F00;
            margin-left: 15px;
            margin-top: 12px;
            text-align: center;
            padding: 0 2px 0 2px;
            /*84 / 346*/
        }
        .ts-card__description--pricebox {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 16px;
            font-weight: bold;
            color: #F00;

            display: flex;
            flex-direction: row;

            justify-content: space-between;
        }
        .ts-card__description--similar {
            font-size: 12px;
            border:1px solid #F00;
            color: #F00;
            border-radius: 16px;
            background-color: #ffe6eb;
            padding: 2px 5px 2px 5px;
            margin-right: 5px;
        }
        .ts-card__recommand {
            margin-left: 15px;
            margin-top: 10px;   /* 30 / 24 * 16 */
            font-size: 12px;

            border-top: 1px solid #e9e9e9;
            color: #818181;

            padding-top: 8px;
        }
        .ts-card__title--text {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="topContainer">
    <div id="searchContainer">
        <div class="layui-col-xs10">
            <input type="text" autocomplete="off" placeholder="请输入品名或商家名称" class="layui-input">
        </div>
        <div class="layui-col-xs2">
            <a class="layui-btn" id="searchBT" style="width: 100%;" lay-filter="searchBT">查询</a>
        </div>
    </div>
    <div id="tranContainer">
        <div class="layui-col-md12">
            <div class="layui-carousel" lay-filter="rollContent" id="rollContent">
                <div carousel-item="">
                    <div><img id="sarousel0" src="img/img1.jpg"></div>
                    <div><img id="sarousel1" src="img/img2.jpg"></div>
                    <div><img id="sarousel2" src="img/img3.png"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="dhContainer">
        <ul>
            <li onclick="sq.open('classification.html')">
                <img src="img/drill.png">
                <div class="dhtitle">类目</div>
            </li>
            <li onclick="window.location.href = 'repair.html'">
                <img src="img/hourglass.png">
                <div class="dhtitle">维修服务</div>
            </li>
            <li>
                <img src="img/toy.png">
                <div class="dhtitle">二手设备</div>
            </li>
            <li>
                <img src="img/pin.png">
                <div class="dhtitle">行业信息</div>
            </li>
            <li onclick="window.location.href = 'inquiry.html'">
                <img src="img/tag.png">
                <div class="dhtitle">一键询价</div>
            </li>
        </ul>
    </div>
</div>
<div id="listTurnContainer">
         <div class="layui-col-xs3 highlight font-mid">
                最新订单
            </div>
            <div class="layui-col-xs8" style="overflow: hidden;height: 20px;">
                <div class="layui-carousel" lay-filter="listTurnContent" id="listTurnContent">
                    <div carousel-item>
                        <div class="grayblack" style="background-color: #FFF;">
                                1348530**** 李先生 掘进机 2018/12/29
                        </div>
                        <div class="grayblack" style="background-color: #FFF;">
                            1348888**** 朱先生 设备备件 2018/12/29
                        </div>
                        <div class="grayblack" style="background-color: #FFF;">
                            1346666**** 杜先生 铲车 2018/12/29
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs1 gray">
                更多
            </div>
</div>
<div id="businessContainer">
    <div class="layui-col-xs12" style="margin-bottom: 5px;">
        <span style="margin-right: 10px;font-weight: bold;">商家展示</span><span style="font-size: 12px;" class="gray">更多商家</span>
    </div>
    <div class="layui-col-xs6">
        <div class="bnoneContainer">
            <div class="bnone">
                <div class="layui-col-xs8">
                    <div class="bnonetext1">山西太原</div>
                    <div class="bnonetext2">山西某某企业</div>
                </div>
                <div class="layui-col-xs4">
                    <img src="img/logo1.png" />
                </div>
                <div class="layui-col-xs12 bnonetext3">主营挖矿机、掘进机、煤机配件等</div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="bnoneContainer">
            <div class="bnone">
                <div class="layui-col-xs8">
                    <div class="bnonetext1">山西长治</div>
                    <div class="bnonetext2">山西某某企业</div>
                </div>
                <div class="layui-col-xs4 boneimgContainer">
                    <img src="img/logo1.png" />
                </div>
                <div class="layui-col-xs12 bnonetext3">主营煤机配件、掘进机、各种采矿设备等</div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="bnoneContainer">
            <div class="bnone">
                <div class="layui-col-xs8">
                    <div class="bnonetext1">山西吕梁</div>
                    <div class="bnonetext2">山西某某企业</div>
                </div>
                <div class="layui-col-xs4">
                    <img src="img/logo1.png" />
                </div>
                <div class="layui-col-xs12 bnonetext3">主营挖矿机、掘进机等</div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="bnoneContainer">
            <div class="bnone">
                <div class="layui-col-xs8">
                    <div class="bnonetext1">山西临汾</div>
                    <div class="bnonetext2">山西某某企业</div>
                </div>
                <div class="layui-col-xs4">
                    <img src="img/logo1.png" />
                </div>
                <div class="layui-col-xs12 bnonetext3">主营挖矿机、掘进机等</div>
            </div>
        </div>
    </div>
</div>
<div id="commodityContainer">
    <div class="layui-col-xs12" style="margin-bottom: 5px;">
        <span style="margin-right: 10px;font-weight: bold;">商品展示</span><span style="font-size: 12px;" class="gray">更多商品</span>
    </div>
    <ul class="ts-container" id="comUL">

    </ul>
</div>
    <div id="footContainer">
        <p>版权所有： </p>
    </div>
<div id="bottomContent">
    <ul id="bottomUL">
        <li class="sureStyle" >
            <i class="layui-icon">&#xe68e;</i>
            <br><span>首页</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='ddlist.html'">&#xe63c;</i>
            <br><span>订单</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='cart.html'">&#xe657;</i>
            <br><span>购物车</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='my.html'">&#xe612;</i>
            <br><span>我的</span>
        </li>
    </ul>
</div>
<!--下方为模板部分-->
    <!--用户登陆的模板-->
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>

<script>
    sq.setapi("test_items.json").setdata({}).sucessFun(function(rel){
        var obj = rel.comlist;
        $("#comUL").html("");
        for(var i=0;i<obj.length;i++){
            $("#comUL").html($("#comUL").html()+'<li class="layui-col-xs6" onclick="sq.open(\'commodity.html#'+obj[i].id+'\')"><div style="" class="ts-card">' +
                '<div class="ts-card__image">' +
                '<img src="'+obj[i].img_url+'" /></div>' +
                '<div style="height: 26px; margin-top:-13px; "><div class="ts-card__title">' +
                '<div class="ts-card__title--text">'+obj[i].branch+'</div></div></div>' +
                '<div class="ts-card__description">' +
                '<div class="ts-card__description--title">'+obj[i].name+'</div>' +
                '<div class="ts-card__description--pricebox">' +
                '<div class="ts-card__description--price">￥'+obj[i].price+'</div>' +
                '<div class="ts-card__description--similar">看相似</div></div></div>' +
                '<div class="ts-card__recommand">'+obj[i].recommand+'</div></div>' +
                '</li>'
            );
        }
    }).run();
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel;
        carousel.render({
            elem: '#rollContent'
            ,width: '100%'
            ,height: '180px'
            ,interval: 5000
        });
        carousel.render({
            elem: '#listTurnContent'
            ,width: '100%'
            ,height: '20px'
            ,interval: 3000
            ,anim :"updown"
            ,arrow:"none"
            ,indicator:"none"
        });
        carousel.on('change(rollContent)', function(obj){
           // var curimg = $("#sarousel"+obj.index).attr("src");
            switch (obj.index){
                case 0 :
                    $("#topContainer").css("background-color","#999999");
                    $("#searchContainer").css("background-color","rgba(184,194,196,0.4)");
                    break;
                case 1 :
                    $("#topContainer").css("background-color","#50574d");
                    $("#searchContainer").css("background-color","rgba(80,87,77,0.4)");
                    break;
                case 2 :
                    $("#topContainer").css("background-color","#445d6a");
                    $("#searchContainer").css("background-color","rgba(68,93,106,0.4)");
                break;
                default :
                    $("#topContainer").css("background-color","#bec6c9");
                    $("#searchContainer").css("background-color","rgba(68,93,106,0.4)");
                    break;
            }
        });
    });
</script>
</html>